<template>
	<rx-dialog @ok="handleSubmit" @cancel="cancel">
		<rx-layout layout="vertical">
            <template #middle>
                <div style=" height: 100%; padding: 20px;">
                    <a-form :model="measureConf">
                        <a-row>
                            <a-col :span="12">
                                <a-form-item :label="screenLangI18n('common.fieldLabel','字段备注')" style="width:85%">
                                    <a-input v-model:value="measureConf.fieldLabel"></a-input>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item  :label="screenLangI18n('common.aggregate','聚合方式')" style="width:85%">
                                    <a-select v-model:value="measureConf.aggregate" :getPopupContainer="p=>p.parentNode" >
                                        <a-select-option value="COUNT">{{screenLangI18n('form.count','计数')}}(COUNT)</a-select-option>
                                        <a-select-option value="COUNTD">{{screenLangI18n('form.deCount','去重计数')}}(COUNTD)</a-select-option>
                                        <a-select-option value="SUM">{{screenLangI18n('form.sum','求和')}}(SUM)</a-select-option>
                                        <a-select-option value="AVG">{{screenLangI18n('form.average','均值')}}(AVG)</a-select-option>
                                        <a-select-option value="MAX">{{screenLangI18n('form.maxValue','最大值')}}(MAX)</a-select-option>
                                        <a-select-option value="MIN">{{screenLangI18n('form.minValue','最小值')}}(MIN)</a-select-option>
                                        <a-select-option value="NONE">{{screenLangI18n('form.not','无')}}(NONE)</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                        </a-row>
                        <a-row>
                            <a-col :span="12">
                                <a-form-item :label="i18n('dataFormatting','数据格式化')">
                                    <a-select v-model:value="measureConf.gestalt.dataFormat" style="width: 300px;" :getPopupContainer="p=>p.parentNode">
                                        <a-select-option value="none">{{i18n('unformatted','不格式化')}}</a-select-option>
                                        <a-select-option value="thousands">{{i18n('thousand','千分位')}}</a-select-option>
                                        <a-select-option value="percentage">{{i18n('percent','百分比')}}</a-select-option>
                                        <a-select-option value="trillion">{{i18n('digital','数字转千/万/亿')}}</a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item :label="i18n('decimalPlaces','小数位')">
                                    <div style="display: flex">
                                        <div style="flex: 1">
                                            <a-select style="width: 100%" v-model:value="measureConf.gestalt.decimals" :getPopupContainer="p=>p.parentNode">
                                                <a-select-option value="none">{{i18n('decimalsNot','不处理小数')}}</a-select-option>
                                                <a-select-option value="roundNumbers">{{i18n('roundNumbers','取整数')}}</a-select-option>
                                                <a-select-option value="oneDecimals">{{i18n('KeepOnePlace','保留一位小数')}}</a-select-option>
                                                <a-select-option value="twoDecimals">{{i18n('KeepTwoPlace','保留两位小数')}}</a-select-option>
                                                <a-select-option value="threeDecimals">{{i18n('KeepThreePlace','保留三位小数')}}</a-select-option>
                                            </a-select>
                                        </div>
                                        <div style="margin:0px 20px" v-if="measureConf.gestalt.decimals!='roundNumbers'">
                                            <span style="margin-right: 10px">{{i18n('roundUp','四舍五入')}}</span><a-switch size="small" v-model:checked="measureConf.gestalt.round"/>
                                        </div>
                                    </div>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
			</template>
		</rx-layout>

	</rx-dialog>
</template>

<script>
import {Util,RxLayout,RxDialog} from "@lowcode/jpaas-base-lib";

export default {
	name: "DynamicFormat",
	props: ["measuresContent"],
    components:{
        RxLayout,
        RxDialog
    },
	data(){
		return{
			measureConf:{
				fieldLabel:"",
				aggregate:"",
				gestalt:{
					dataFormat: 'none',//格式华
					decimals: 'none',//小数处理
					round: false,//四舍五入
				},
			}
		}
	},
	mounted(){
		this.init()
	 },
	methods:{
		i18n(name,text,key){
			return this.$ti18(name,text,"dynamicFormatLang",key);
		},
		screenLangI18n(name,text,key){
			return this.$ti18(name,text,"screenLang",key);
		},
		init(){
			this.measureConf=Object.assign(this.measureConf,this.measuresContent);
		},
		handleSubmit() {
			Util.closeWindow(this, "ok",this.measureConf);
		},
		cancel() {
			Util.closeWindow(this, "cancel");
		},
	}
}
</script>

<style scoped>

</style>
